<template>
  <div id="search-detail" class="content-box" ref="search">
    <h1 class="font-weight">搜索：{{ searchWord }}</h1>
    <Tabs :tabList="tabList" @target="target">
      <template #other>
        <span class="font-12" style="color: #cfcfcf">
          找到{{ total }}{{ desInfo }}
        </span>
      </template>
    </Tabs>
    <a-skeleton v-if="current !== 3" :loading="show" active :paragraph="{ rows: 10 }">
      <component
        :is="module"
        :columns="columns"
        :dataSource="list"
        :uniList="list"
        :showHead="false"
        @goDetail="goDetail"
      >
        <template slot-scope="scope">
          <!-- 专辑内容 -->
          <div class="album-temp" v-if="current === 2">
            <div
              class="font-12"
              style="color: #c3c3c4;"
              @click="goArtist(scope.artist.id)">
              {{ scope.artist.name }}
            </div>
          </div>
          <!-- 歌单内容 -->
          <div class="song-list" v-if="current === 4">
            <div class="font-12">
              {{ scope.trackCount }}首
            </div>
            <div class="font-12">
              by {{ scope.creator.nickname }}
            </div>
            <div class="font-12">
              <i class="iconfont icon-bofang1"></i>
              {{ changeBig(scope.playCount) }}
            </div>
          </div>
          <!-- 用户内容 -->
          <div class="user-list" v-if="current === 5">
            <div class="font-12 textmore-hidden" :title="scope.signature">
              {{ scope.signature }}
            </div>
          </div>
        </template>
      </component>
      <a-pagination
        v-model="cPage"
        :total="total"
        :defaultPageSize="30"
        hideOnSinglePage
        show-less-items
        @change="changePage"
      />
    </a-skeleton>
    <!-- <MvList
      v-else
      v-for="item in mvs"
      :key="item.id"
      :playcount="item.playCount"
      :cover="item.imgurl"
      :videoAuthor="[item.artist]"
      :videoTitle="item.name"
      :durationms="item.duration"
    /> -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Tabs from '@/components/Content/Tabs';
import List from '@/components/Detail/List';
import UniList from '@/components/Content/UniList';
// import MvList from '@/components/Content/MvList';
import { changeBigCount } from '@/utils/figure';
import { cloudSearch } from '@/api/detail';
import { Skeleton, Pagination } from 'ant-design-vue';

export default {
  name: 'searchDetail',

  components: {
    Tabs,
    List,
    // MvList,
    UniList,
    APagination: Pagination,
    ASkeleton: Skeleton
  },

  data() {
    return {
      tabList: [{
        tabName: '单曲',
        isActive: true,
        id: 0
      }, {
        tabName: '歌手',
        isActive: false,
        id: 1
      }, {
        tabName: '专辑',
        isActive: false,
        id: 2
      }, {
        tabName: '视频',
        isActive: false,
        id: 3
      }, {
        tabName: '歌单',
        isActive: false,
        id: 4
      }, {
        tabName: '用户',
        isActive: false,
        id: 5
      }],
      columns: [
        {
          title: '',
          dataIndex: 'index',
          key: 'index',
          width: 50,
          scopedSlots: { customRender: 'key' }
        },
        {
          title: '',
          dataIndex: 'operation',
          key: 'operation',
          width: 30,
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '歌手',
          dataIndex: 'ar',
          key: 'ar',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'ar' }
        },
        {
          title: '专辑名',
          dataIndex: 'al',
          key: 'al',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'al' }
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
          scopedSlots: { customRender: 'duration' }
        },
      ],
      /* 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1014: 视频*/
      searchType: [1, 100, 10, 1004, 1000, 1002],
      sizeText: ['首', '位', '张', '个', '个', '位'],
      text: ['单曲', '歌手', '专辑', '视频', '歌单', '用户'],
      // 搜索参数
      searchParams: {
        keywords: '',
        limit: 30,
        offset: 0,
        type: 1,
        timestamp: new Date().getTime()
      },
      total: 0,
      list: [],
      mvs: [],
      current: 0,
      // 当前第几页
      cPage: 1,
      module: List,
      // 骨架屏显示隐藏
      show: false,
    }
  },

  computed: {
    searchWord() {
      return this.$route.query.keywords;
    },
    desInfo() {
      return this.sizeText[this.current] + this.text[this.current]
    },
    ...mapState({
      operation: state => state.main.operation
    })
  },

  watch: {
    current: {
      handler(value) {
        console.log(value);
        this.searchParams.type = this.searchType[value];
        this.getSearchDetail();
      }
    },
    searchWord: {
      handler(value, oldValue) {
        if (value === oldValue) return;
        this.searchParams.keywords = value;
        this.target('0');
        this.tabList.find(item => item.isActive).isActive = false;
        this.tabList[0].isActive = true;
        this.getSearchDetail();
      }
    }
  },

  methods: {
    target(v) {
      this.current = +v;
      this.cPage = 1;
      this.searchParams.offset = 0;
    },
    changeBig(val) {
      return changeBigCount(val);
    },
    async getSearchDetail() {
      this.show = true;
      const res = (await cloudSearch(this.searchParams)).data;
      switch (this.current) {
        case 0:
          this.list = Object.freeze(res.result.songs);
          this.total = res.result.songCount;
          this.module = List;
          this.$store.commit('main/OPERATION', {
            current: 0,
            page: this.cPage
          })
          break;
        case 1:
          this.list = Object.freeze(res.result.artists);
          this.total = res.result.artistCount;
          this.module = UniList;
          break
        case 2:
          this.list = Object.freeze(res.result.albums)
          this.total = res.result.albumCount;
          this.module = UniList;
          break
        case 3:
          this.list = Object.freeze(res.result.mvs)
          this.total = res.result.mvCount;
          // this.module = ''
          break
        case 4:
          this.list = Object.freeze(res.result.playlists)
          this.total = res.result.playlistCount;
          this.module = UniList;
          break
        default:
          this.list = Object.freeze(res.result.userprofiles)
          this.total = res.result.userprofileCount;
          this.module = UniList;
      }
      this.show = false;
    },
    // 分页
    changePage(page, pageSize) {
      this.cPage = page;
      this.searchParams.offset = (page - 1) * 30;
      this.getSearchDetail();
    },
    goDetail(id) {
      if (!id) return;
      const go = {
        name: 'artistdetail',
        query: { id }
      }
      
      this.$store.commit('main/OPERATION', {
        current: this.current,
        page: this.cPage
      })
      if (this.current === 1) {
        go.name = 'artistdetail';
      } else if (this.current === 2) {
        go.name = 'albumdetail';
      } else if (this.current === 4) {
        go.name = 'playlistdetail';
      } else {
        go.name = 'userdetail';
      }
      this.$router.push(go);
    },
    goArtist(id) {
      this.$router.push({
        name: 'artistdetail',
        query: { id }
      })
    }
  },

  created() {
    const { current, page } = this.operation;
    this.tabList.find(item => item.isActive).isActive = false;
    this.tabList[current].isActive = true;
    this.current = current;
    this.cPage = page;
    this.searchParams.keywords = this.searchWord;
    this.searchParams.offset = (page - 1) * 30;
    if (current === 0) {
      this.getSearchDetail();
    }
  }
}
</script>

<style lang="less" scoped>
#search-detail {
  height: 100%;
  padding-top: 20px;
  /deep/ul.tab-list {
    margin-left: 0 !important;
  }
  /deep/ul.ant-pagination {
    text-align: center;
    margin: 10px 0;
  }
  .song-list,
  .user-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #c3c3c4;
    &:last-child {
      margin-right: 10px;
    }
  }
}
</style>